import React, { Component } from 'react'
import { View, ScrollView, Text, Image, TouchableOpacity, KeyboardAvoidingView, TextInput } from 'react-native'
import { Metrics, Colors } from '../Themes'
import { API, WINDOW } from '../Services'
import Button from 'apsl-react-native-button'
import styles from './Styles/CommonContainerStyles'
import underscore from 'underscore'

class DeviceRuleScreen extends Component {
    constructor(props) {
        super(props)
        this.state = {
            sceneId: this.props.route.params.sceneId,
            rule: {},
            bt_isLoading:false,
        }
    }

    componentDidMount() {
        this.fetchData()
    }

    fetchData() {
        API.getRuleInfo(this.state.sceneId).then((response) => {
            const { ok, resultMessage, data } = response
            if (ok) {
                this.setState({ rule: underscore.first(data.rule) || {} })
            } else {
                return WINDOW.showToast(resultMessage)
            }
        })
    }

    _doChange() {
        this.setState({bt_isLoading:true})
        API.updateRuleById(this.state.rule).then((response) => {
            const { resultCode, resultMessage } = response
            if (resultCode == 0) {
                WINDOW.showToast('修改成功！')
                this.props.navigation.goBack()
            } else {
                return WINDOW.showToast(resultMessage)
            }
        })
    }

    _renderListHeader(title) {
        return (
            <View style={{ width: '100%', height: 48, backgroundColor: Colors.lightBackground, flexDirection: 'row', alignItems: 'center', alignSelf: 'center', justifyContent: 'space-between', borderTopLeftRadius: 8, borderTopRightRadius: 8, borderBottomWidth: 1, borderColor: Colors.buttonColor }}>
                <Text style={{ fontSize: 18, color: 'black', marginLeft: 15 }}>{title}</Text>
            </View>
        )
    }

    _renderFirst() {
        return (
            <View style={{ margin: 13 }}>
                {this._renderListHeader('控制规则')}
                {(this.state.rule.highTemperature || this.state.rule.highTemperature === 0) ? this._render_kz_wd() : <View />}
                {(this.state.rule.highHumidity || this.state.rule.highHumidity === 0) ? this._render_kz_sd() : <View />}
                {(this.state.rule.CO2high || this.state.rule.CO2high === 0) ? this._render_kz_co2() : <View />}
                {(this.state.rule.TVOChigh || this.state.rule.TVOChigh === 0) ? this._render_kz_tvoc() : <View />}
                {(this.state.rule.VIShigh || this.state.rule.VIShigh === 0) ? this._render_kz_vis : <View />}
                {(this.state.rule.UVhigh || this.state.rule.UVhigh === 0) ? this._render_kz_uv() : <View />}
                {(this.state.rule.HCHOhigh || this.state.rule.HCHOhigh === 0) ? this._render_kz_hcho() : <View />}
                {(this.state.rule.PM2high || this.state.rule.PM2high === 0) ? this._render_kz_pm25() : <View />}
            </View>
        )
    }

    _render_kz_wd = () => {
        let rule = this.state.rule
        return (
            <View style={{ width: '100%', height: 62, backgroundColor: Colors.darkBackground, flexDirection: 'row', alignItems: 'center', alignSelf: 'center' }}>
                <Text style={{ fontSize: 18, color: 'black', marginLeft: 15 }}>温度范围：</Text>
                <View style={{ alignItems: 'center', flexDirection: 'row', marginLeft: 10 }}>
                    <Text style={{ fontSize: 14, color: 'black' }}>从</Text>
                    <View style={{ width: 150, height: 40, marginLeft: 10, backgroundColor: Colors.lightBackground, borderRadius: 5, flexDirection: 'row', alignItems: 'center', }}>
                        <TextInput
                            style={{ flex: 1, height: 40, marginLeft: 10, color: 'black' }}
                            fontSize={18}
                            keyboardType='numeric'
                            underlineColorAndroid='transparent'
                            value={rule.lowTemperature != null ? String(rule.lowTemperature) : ''}
                            onChangeText={(lowTemperature) =>
                                this.setState((prevState) => {
                                    return {
                                        rule: { ...prevState.rule, lowTemperature: lowTemperature && parseFloat(lowTemperature) }
                                    };
                                })
                            } />
                    </View>
                    <Text style={{ fontSize: 14, color: 'black', marginLeft: 10 }}>到</Text>
                    <View style={{ width: 150, height: 40, marginLeft: 10, backgroundColor: Colors.lightBackground, borderRadius: 5, flexDirection: 'row', alignItems: 'center', }}>
                        <TextInput
                            style={{ flex: 1, height: 40, marginLeft: 10, color: 'black' }}
                            fontSize={18}
                            keyboardType='numeric'
                            underlineColorAndroid='transparent'
                            value={rule.highTemperature != null ? String(rule.highTemperature) : ''}
                            onChangeText={(highTemperature) =>
                                this.setState((prevState) => {
                                    return {
                                        rule: { ...prevState.rule, highTemperature: highTemperature && parseFloat(highTemperature) }
                                    };
                                })
                            } />
                    </View>
                </View>
            </View>
        )
    }
    _render_kz_sd = () => {
        let rule = this.state.rule
        return (
            <View style={{ width: '100%', height: 62, backgroundColor: Colors.darkBackground, flexDirection: 'row', alignItems: 'center', alignSelf: 'center' }}>
                <Text style={{ fontSize: 18, color: 'black', marginLeft: 15 }}>湿度范围：</Text>
                <View style={{ alignItems: 'center', flexDirection: 'row', marginLeft: 10 }}>
                    <Text style={{ fontSize: 14, color: 'black' }}>从</Text>
                    <View style={{ width: 150, height: 40, marginLeft: 10, backgroundColor: Colors.lightBackground, borderRadius: 5, flexDirection: 'row', alignItems: 'center', }}>
                        <TextInput
                            style={{ flex: 1, height: 40, marginLeft: 10, color: 'black' }}
                            fontSize={18}
                            keyboardType='numeric'
                            underlineColorAndroid='transparent'
                            value={rule.lowHumidity != null ? String(rule.lowHumidity) : ''}
                            onChangeText={(lowHumidity) =>
                                this.setState((prevState) => {
                                    return {
                                        rule: { ...prevState.rule, lowHumidity: lowHumidity && parseFloat(lowHumidity) }
                                    };
                                })
                            } />
                    </View>
                    <Text style={{ fontSize: 14, color: 'black', marginLeft: 10 }}>到</Text>
                    <View style={{ width: 150, height: 40, marginLeft: 10, backgroundColor: Colors.lightBackground, borderRadius: 5, flexDirection: 'row', alignItems: 'center', }}>
                        <TextInput
                            style={{ flex: 1, height: 40, marginLeft: 10, color: 'black' }}
                            fontSize={18}
                            keyboardType='numeric'
                            underlineColorAndroid='transparent'
                            value={rule.highHumidity != null ? String(rule.highHumidity) : ''}
                            onChangeText={(highHumidity) =>
                                this.setState((prevState) => {
                                    return {
                                        rule: { ...prevState.rule, highHumidity: highHumidity && parseFloat(highHumidity) }
                                    };
                                })
                            } />

                    </View>
                </View>
            </View>
        )
    }



    _render_kz_co2 = () => {
        let rule = this.state.rule
        return (
            <View style={{ width: '100%', height: 62, backgroundColor: Colors.darkBackground, flexDirection: 'row', alignItems: 'center', alignSelf: 'center', justifyContent: 'space-between' }}>
                <Text style={{ fontSize: 18, color: 'black', marginLeft: 15 }}>CO₂阈值：</Text>
                <View style={{ flex: 1, height: 40, marginLeft: 10, marginRight: 15, backgroundColor: Colors.lightBackground, borderRadius: 5, flexDirection: 'row', alignItems: 'center', }}>
                    <TextInput
                        style={{ flex: 1, height: 40, marginLeft: 10, color: 'black' }}
                        fontSize={18}
                        keyboardType='numeric'
                        underlineColorAndroid='transparent'
                        value={rule.CO2high != null ? String(rule.CO2high) : ''}
                        onChangeText={(CO2high) =>
                            this.setState((prevState) => {
                                return {
                                    rule: { ...prevState.rule, CO2high: CO2high && parseFloat(CO2high) }
                                };
                            })
                        } />
                </View>
            </View>
        )
    }

    _render_kz_tvoc = () => {
        let rule = this.state.rule
        return (
            <View style={{ width: '100%', height: 62, backgroundColor: Colors.darkBackground, flexDirection: 'row', alignItems: 'center', alignSelf: 'center', justifyContent: 'space-between' }}>
                <Text style={{ fontSize: 18, color: 'black', marginLeft: 15 }}>TVOC阈值：</Text>
                <View style={{ flex: 1, height: 40, marginLeft: 10, marginRight: 15, backgroundColor: Colors.lightBackground, borderRadius: 5, flexDirection: 'row', alignItems: 'center', }}>
                    <TextInput
                        style={{ flex: 1, height: 40, marginLeft: 10, color: 'black' }}
                        fontSize={18}
                        keyboardType='numeric'
                        underlineColorAndroid='transparent'
                        value={rule.TVOChigh != null ? String(rule.TVOChigh) : ''}
                        onChangeText={(TVOChigh) =>
                            this.setState((prevState) => {
                                return {
                                    rule: { ...prevState.rule, TVOChigh: TVOChigh && parseFloat(TVOChigh) }
                                };
                            })
                        } />
                </View>
            </View>
        )
    }

    _render_kz_vis = () => {
        let rule = this.state.rule
        return (
            <View style={{ width: '100%', height: 62, backgroundColor: Colors.darkBackground, flexDirection: 'row', alignItems: 'center', alignSelf: 'center', justifyContent: 'space-between' }}>
                <Text style={{ fontSize: 18, color: 'black', marginLeft: 15 }}>光强阈值：</Text>
                <View style={{ flex: 1, height: 40, marginLeft: 10, marginRight: 15, backgroundColor: Colors.lightBackground, borderRadius: 5, flexDirection: 'row', alignItems: 'center', }}>
                    <TextInput
                        style={{ flex: 1, height: 40, marginLeft: 10, color: 'black' }}
                        fontSize={18}
                        keyboardType='numeric'
                        underlineColorAndroid='transparent'
                        value={rule.VIShigh != null ? String(rule.VIShigh) : ''}
                        onChangeText={(VIShigh) =>
                            this.setState((prevState) => {
                                return {
                                    rule: { ...prevState.rule, VIShigh: VIShigh && parseFloat(VIShigh) }
                                };
                            })
                        } />
                </View>
            </View>
        )
    }

    _render_kz_uv = () => {
        let rule = this.state.rule
        return (
            <View style={{ width: '100%', height: 62, backgroundColor: Colors.darkBackground, flexDirection: 'row', alignItems: 'center', alignSelf: 'center', justifyContent: 'space-between' }}>
                <Text style={{ fontSize: 18, color: 'black', marginLeft: 15 }}>紫外线阈值：</Text>
                <View style={{ flex: 1, height: 40, marginLeft: 10, marginRight: 15, backgroundColor: Colors.lightBackground, borderRadius: 5, flexDirection: 'row', alignItems: 'center', }}>
                    <TextInput
                        style={{ flex: 1, height: 40, marginLeft: 10, color: 'black' }}
                        fontSize={18}
                        keyboardType='numeric'
                        underlineColorAndroid='transparent'
                        value={rule.UVhigh != null ? String(rule.UVhigh) : ''}
                        onChangeText={(UVhigh) =>
                            this.setState((prevState) => {
                                return {
                                    rule: { ...prevState.rule, UVhigh: UVhigh && parseFloat(UVhigh) }
                                };
                            })
                        } />
                </View>
            </View>
        )
    }

    _render_kz_hcho = () => {
        let rule = this.state.rule
        return (
            <View style={{ width: '100%', height: 62, backgroundColor: Colors.darkBackground, flexDirection: 'row', alignItems: 'center', alignSelf: 'center', justifyContent: 'space-between' }}>
                <Text style={{ fontSize: 18, color: 'black', marginLeft: 15 }}>甲醛阈值：</Text>
                <View style={{ flex: 1, height: 40, marginLeft: 10, marginRight: 15, backgroundColor: Colors.lightBackground, borderRadius: 5, flexDirection: 'row', alignItems: 'center', }}>
                    <TextInput
                        style={{ flex: 1, height: 40, marginLeft: 10, color: 'black' }}
                        fontSize={18}
                        keyboardType='numeric'
                        underlineColorAndroid='transparent'
                        value={rule.HCHOhigh != null ? String(rule.HCHOhigh) : ''}
                        onChangeText={(HCHOhigh) =>
                            this.setState((prevState) => {
                                return {
                                    rule: { ...prevState.rule, HCHOhigh: HCHOhigh && parseFloat(HCHOhigh) }
                                };
                            })
                        } />
                </View>
            </View>
        )
    }

    _render_kz_pm25 = () => {
        let rule = this.state.rule
        return (
            <View style={{ width: '100%', height: 62, backgroundColor: Colors.darkBackground, flexDirection: 'row', alignItems: 'center', alignSelf: 'center', justifyContent: 'space-between' }}>
                <Text style={{ fontSize: 18, color: 'black', marginLeft: 15 }}>PM2.5阈值：</Text>
                <View style={{ flex: 1, height: 40, marginLeft: 10, marginRight: 15, backgroundColor: Colors.lightBackground, borderRadius: 5, flexDirection: 'row', alignItems: 'center', }}>
                    <TextInput
                        style={{ flex: 1, height: 40, marginLeft: 10, color: 'black' }}
                        fontSize={18}
                        keyboardType='numeric'
                        underlineColorAndroid='transparent'
                        value={rule.PM2high != null ? String(rule.PM2high) : ''}
                        onChangeText={(PM2high) =>
                            this.setState((prevState) => {
                                return {
                                    rule: { ...prevState.rule, PM2high: PM2high && parseFloat(PM2high) }
                                };
                            })
                        } />
                </View>
            </View>
        )
    }






    _renderSecond() {
        return (
            <View style={{ margin: 13 }}>
                {this._renderListHeader('告警规则')}
                {(this.state.rule.alarmLowtemp || this.state.rule.alarmLowtemp === 0) ? this._render_gj_wd_low() : <View />}
                {(this.state.rule.alarmHighTemp || this.state.rule.alarmHighTemp === 0) ? this._render_gj_wd_height() : <View />}
                {(this.state.rule.alarmLowhumi || this.state.rule.alarmLowhumi === 0) ? this._render_gj_sd_low() : <View />}
                {(this.state.rule.alarmHighhumi || this.state.rule.alarmHighhumi === 0) ? this._render_gj_sd_height() : <View />}
                {(this.state.rule.alarmhighco2 || this.state.rule.alarmhighco2 === 0) ? this._render_gj_co2() : <View />}
                {(this.state.rule.alarmhightvoc || this.state.rule.alarmhightvoc === 0) ? this._render_gj_tvoc() : <View />}
                {(this.state.rule.alarmhighvis || this.state.rule.alarmhighvis === 0) ? this._render_gj_vis : <View />}
                {(this.state.rule.alarmhighuv || this.state.rule.alarmhighuv === 0) ? this._render_gj_uv() : <View />}
                {(this.state.rule.alarmhighhcho || this.state.rule.alarmhighhcho === 0) ? this._render_gj_hcho() : <View />}
                {(this.state.rule.alarmhighpm2 || this.state.rule.alarmhighpm2 === 0) ? this._render_gj_pm25() : <View />}
                {(this.state.rule.voltagewarining || this.state.rule.voltagewarining === 0) ? this._render_gj_voltagewarining() : <View />}
                {(this.state.rule.fireAlarm || this.state.rule.fireAlarm === 0) ? this._render_gj_fireAlarm() : <View />}
                {(this.state.rule.waterAlarm || this.state.rule.waterAlarm === 0) ? this._render_gj_waterAlarm() : <View />}
                {(this.state.rule.agressiveAlarm || this.state.rule.agressiveAlarm === 0) ? this._render_gj_agressiveAlarm() : <View />}
            </View>
        )
    } fireAlarm


    _render_gj_wd_low = () => {
        let rule = this.state.rule
        return (
            <View style={{ width: '100%', height: 62, backgroundColor: Colors.darkBackground, flexDirection: 'row', alignItems: 'center', alignSelf: 'center', justifyContent: 'space-between' }}>
                <Text style={{ fontSize: 18, color: 'black', marginLeft: 15 }}>温度低于该值告警：</Text>
                <View style={{ flex: 1, height: 40, marginLeft: 10, marginRight: 15, backgroundColor: Colors.lightBackground, borderRadius: 5, flexDirection: 'row', alignItems: 'center', }}>
                    <TextInput
                        style={{ flex: 1, height: 40, marginLeft: 10, color: 'black' }}
                        fontSize={18}
                        keyboardType='numeric'
                        underlineColorAndroid='transparent'
                        value={rule.alarmLowtemp != null ? String(rule.alarmLowtemp) : ''}
                        onChangeText={(alarmLowtemp) =>
                            this.setState((prevState) => {
                                return {
                                    rule: { ...prevState.rule, alarmLowtemp: alarmLowtemp && parseFloat(alarmLowtemp) }
                                };
                            })
                        } />
                </View>
            </View>
        )
    }

    _render_gj_wd_height = () => {
        let rule = this.state.rule
        return (
            <View style={{ width: '100%', height: 62, backgroundColor: Colors.darkBackground, flexDirection: 'row', alignItems: 'center', alignSelf: 'center', justifyContent: 'space-between' }}>
                <Text style={{ fontSize: 18, color: 'black', marginLeft: 15 }}>温度高于该值告警：</Text>
                <View style={{ flex: 1, height: 40, marginLeft: 10, marginRight: 15, backgroundColor: Colors.lightBackground, borderRadius: 5, flexDirection: 'row', alignItems: 'center', }}>
                    <TextInput
                        style={{ flex: 1, height: 40, marginLeft: 10, color: 'black' }}
                        fontSize={18}
                        keyboardType='numeric'
                        underlineColorAndroid='transparent'
                        value={rule.alarmHighTemp != null ? String(rule.alarmHighTemp) : ''}
                        onChangeText={(alarmHighTemp) =>
                            this.setState((prevState) => {
                                return {
                                    rule: { ...prevState.rule, alarmHighTemp: alarmHighTemp && parseFloat(alarmHighTemp) }
                                };
                            })
                        } />
                </View>
            </View>
        )
    }


    _render_gj_sd_low = () => {
        let rule = this.state.rule
        return (
            <View style={{ width: '100%', height: 62, backgroundColor: Colors.darkBackground, flexDirection: 'row', alignItems: 'center', alignSelf: 'center', justifyContent: 'space-between' }}>
                <Text style={{ fontSize: 18, color: 'black', marginLeft: 15 }}>湿度低于该值告警：</Text>
                <View style={{ flex: 1, height: 40, marginLeft: 10, marginRight: 15, backgroundColor: Colors.lightBackground, borderRadius: 5, flexDirection: 'row', alignItems: 'center', }}>
                    <TextInput
                        style={{ flex: 1, height: 40, marginLeft: 10, color: 'black' }}
                        fontSize={18}
                        keyboardType='numeric'
                        underlineColorAndroid='transparent'
                        value={rule.alarmLowhumi != null ? String(rule.alarmLowhumi) : ''}
                        onChangeText={(alarmLowhumi) =>
                            this.setState((prevState) => {
                                return {
                                    rule: { ...prevState.rule, alarmLowhumi: alarmLowhumi && parseFloat(alarmLowhumi) }
                                };
                            })
                        } />
                </View>
            </View>
        )
    }

    _render_gj_sd_height = () => {
        let rule = this.state.rule
        return (
            <View style={{ width: '100%', height: 62, backgroundColor: Colors.darkBackground, flexDirection: 'row', alignItems: 'center', alignSelf: 'center', justifyContent: 'space-between' }}>
                <Text style={{ fontSize: 18, color: 'black', marginLeft: 15 }}>湿高于该值告警：</Text>
                <View style={{ flex: 1, height: 40, marginLeft: 10, marginRight: 15, backgroundColor: Colors.lightBackground, borderRadius: 5, flexDirection: 'row', alignItems: 'center', }}>
                    <TextInput
                        style={{ flex: 1, height: 40, marginLeft: 10, color: 'black' }}
                        fontSize={18}
                        keyboardType='numeric'
                        underlineColorAndroid='transparent'
                        value={rule.alarmHighhumi != null ? String(rule.alarmHighhumi) : ''}
                        onChangeText={(alarmHighhumi) =>
                            this.setState((prevState) => {
                                return {
                                    rule: { ...prevState.rule, alarmHighhumi: alarmHighhumi && parseFloat(alarmHighhumi) }
                                };
                            })
                        } />
                </View>
            </View>
        )
    }


    _render_gj_co2 = () => {
        let rule = this.state.rule
        return (
            <View style={{ width: '100%', height: 62, backgroundColor: Colors.darkBackground, flexDirection: 'row', alignItems: 'center', alignSelf: 'center', justifyContent: 'space-between' }}>
                <Text style={{ fontSize: 18, color: 'black', marginLeft: 15 }}>CO₂阈值：</Text>
                <View style={{ flex: 1, height: 40, marginLeft: 10, marginRight: 15, backgroundColor: Colors.lightBackground, borderRadius: 5, flexDirection: 'row', alignItems: 'center', }}>
                    <TextInput
                        style={{ flex: 1, height: 40, marginLeft: 10, color: 'black' }}
                        fontSize={18}
                        keyboardType='numeric'
                        underlineColorAndroid='transparent'
                        value={rule.alarmhighco2 != null ? String(rule.alarmhighco2) : ''}
                        onChangeText={(alarmhighco2) =>
                            this.setState((prevState) => {
                                return {
                                    rule: { ...prevState.rule, alarmhighco2: alarmhighco2 && parseFloat(alarmhighco2) }
                                };
                            })
                        } />
                </View>
            </View>
        )
    }

    _render_gj_tvoc = () => {
        let rule = this.state.rule
        return (
            <View style={{ width: '100%', height: 62, backgroundColor: Colors.darkBackground, flexDirection: 'row', alignItems: 'center', alignSelf: 'center', justifyContent: 'space-between' }}>
                <Text style={{ fontSize: 18, color: 'black', marginLeft: 15 }}>TVOC阈值：</Text>
                <View style={{ flex: 1, height: 40, marginLeft: 10, marginRight: 15, backgroundColor: Colors.lightBackground, borderRadius: 5, flexDirection: 'row', alignItems: 'center', }}>
                    <TextInput
                        style={{ flex: 1, height: 40, marginLeft: 10, color: 'black' }}
                        fontSize={18}
                        keyboardType='numeric'
                        underlineColorAndroid='transparent'
                        value={rule.alarmhightvoc != null ? String(rule.alarmhightvoc) : ''}
                        onChangeText={(alarmhightvoc) =>
                            this.setState((prevState) => {
                                return {
                                    rule: { ...prevState.rule, alarmhightvoc: alarmhightvoc && parseFloat(alarmhightvoc) }
                                };
                            })
                        } />
                </View>
            </View>
        )
    }

    _render_gj_vis = () => {
        let rule = this.state.rule
        return (
            <View style={{ width: '100%', height: 62, backgroundColor: Colors.darkBackground, flexDirection: 'row', alignItems: 'center', alignSelf: 'center', justifyContent: 'space-between' }}>
                <Text style={{ fontSize: 18, color: 'black', marginLeft: 15 }}>光强阈值：</Text>
                <View style={{ flex: 1, height: 40, marginLeft: 10, marginRight: 15, backgroundColor: Colors.lightBackground, borderRadius: 5, flexDirection: 'row', alignItems: 'center', }}>
                    <TextInput
                        style={{ flex: 1, height: 40, marginLeft: 10, color: 'black' }}
                        fontSize={18}
                        keyboardType='numeric'
                        underlineColorAndroid='transparent'
                        value={rule.alarmhighvis != null ? String(rule.alarmhighvis) : ''}
                        onChangeText={(alarmhighvis) =>
                            this.setState((prevState) => {
                                return {
                                    rule: { ...prevState.rule, alarmhighvis: alarmhighvis && parseFloat(alarmhighvis) }
                                };
                            })
                        } />
                </View>
            </View>
        )
    }

    _render_gj_uv = () => {
        let rule = this.state.rule
        return (
            <View style={{ width: '100%', height: 62, backgroundColor: Colors.darkBackground, flexDirection: 'row', alignItems: 'center', alignSelf: 'center', justifyContent: 'space-between' }}>
                <Text style={{ fontSize: 18, color: 'black', marginLeft: 15 }}>紫外线阈值：</Text>
                <View style={{ flex: 1, height: 40, marginLeft: 10, marginRight: 15, backgroundColor: Colors.lightBackground, borderRadius: 5, flexDirection: 'row', alignItems: 'center', }}>
                    <TextInput
                        style={{ flex: 1, height: 40, marginLeft: 10, color: 'black' }}
                        fontSize={18}
                        keyboardType='numeric'
                        underlineColorAndroid='transparent'
                        value={rule.alarmhighuv != null ? String(rule.alarmhighuv) : ''}
                        onChangeText={(alarmhighuv) =>
                            this.setState((prevState) => {
                                return {
                                    rule: { ...prevState.rule, alarmhighuv: alarmhighuv && parseFloat(alarmhighuv) }
                                };
                            })
                        } />
                </View>
            </View>
        )
    }

    _render_gj_hcho = () => {
        let rule = this.state.rule
        return (
            <View style={{ width: '100%', height: 62, backgroundColor: Colors.darkBackground, flexDirection: 'row', alignItems: 'center', alignSelf: 'center', justifyContent: 'space-between' }}>
                <Text style={{ fontSize: 18, color: 'black', marginLeft: 15 }}>甲醛阈值：</Text>
                <View style={{ flex: 1, height: 40, marginLeft: 10, marginRight: 15, backgroundColor: Colors.lightBackground, borderRadius: 5, flexDirection: 'row', alignItems: 'center', }}>
                    <TextInput
                        style={{ flex: 1, height: 40, marginLeft: 10, color: 'black' }}
                        fontSize={18}
                        keyboardType='numeric'
                        underlineColorAndroid='transparent'
                        value={rule.alarmhighhcho != null ? String(rule.alarmhighhcho) : ''}
                        onChangeText={(alarmhighhcho) =>
                            this.setState((prevState) => {
                                return {
                                    rule: { ...prevState.rule, alarmhighhcho: alarmhighhcho && parseFloat(alarmhighhcho) }
                                };
                            })
                        } />
                </View>
            </View>
        )
    }

    _render_gj_pm25 = () => {
        let rule = this.state.rule
        return (
            <View style={{ width: '100%', height: 62, backgroundColor: Colors.darkBackground, flexDirection: 'row', alignItems: 'center', alignSelf: 'center', justifyContent: 'space-between' }}>
                <Text style={{ fontSize: 18, color: 'black', marginLeft: 15 }}>PM2.5阈值：</Text>
                <View style={{ flex: 1, height: 40, marginLeft: 10, marginRight: 15, backgroundColor: Colors.lightBackground, borderRadius: 5, flexDirection: 'row', alignItems: 'center', }}>
                    <TextInput
                        style={{ flex: 1, height: 40, marginLeft: 10, color: 'black' }}
                        fontSize={18}
                        keyboardType='numeric'
                        underlineColorAndroid='transparent'
                        value={rule.alarmhighpm2 != null ? String(rule.alarmhighpm2) : ''}
                        onChangeText={(alarmhighpm2) =>
                            this.setState((prevState) => {
                                return {
                                    rule: { ...prevState.rule, alarmhighpm2: alarmhighpm2 && parseFloat(alarmhighpm2) }
                                };
                            })
                        } />
                </View>
            </View>
        )
    }

    _render_gj_voltagewarining = () => {
        let rule = this.state.rule
        return (
            <View style={{ width: '100%', height: 62, backgroundColor: Colors.darkBackground, flexDirection: 'row', alignItems: 'center', alignSelf: 'center', justifyContent: 'space-between' }}>
                <Text style={{ fontSize: 18, color: 'black', marginLeft: 15 }}>电压阈值：</Text>
                <View style={{ flex: 1, height: 40, marginLeft: 10, marginRight: 15, backgroundColor: Colors.lightBackground, borderRadius: 5, flexDirection: 'row', alignItems: 'center', }}>
                    <TextInput
                        style={{ flex: 1, height: 40, marginLeft: 10, color: 'black' }}
                        fontSize={18}
                        keyboardType='numeric'
                        underlineColorAndroid='transparent'
                        value={rule.voltagewarining != null ? String(rule.voltagewarining) : ''}
                        onChangeText={(voltagewarining) =>
                            this.setState((prevState) => {
                                return {
                                    rule: { ...prevState.rule, voltagewarining: voltagewarining && parseFloat(voltagewarining) }
                                };
                            })
                        } />
                </View>
            </View>
        )
    }



    _render_gj_fireAlarm = () => {
        let rule = this.state.rule
        return (
            <View style={{ width: '100%', height: 62, backgroundColor: Colors.darkBackground, flexDirection: 'row', alignItems: 'center', alignSelf: 'center' }}>
                <Text style={{ fontSize: 18, color: 'black', marginLeft: 15, marginRight: 30 }}>烟感报警：</Text>
                <TouchableOpacity onPress={() => {
                    let fireAlarm = !Boolean(rule.fireAlarm) * 1
                    this.setState((prevState) => {
                        return {
                            rule: { ...prevState.rule, fireAlarm: fireAlarm }
                        };
                    })
                }} >
                    <Image source={Boolean(rule.fireAlarm) ? require('../Images/check_sel.png') : require('../Images/check_unsel.png')} />
                </TouchableOpacity>
            </View>
        )
    }


    _render_gj_waterAlarm = () => {
        let rule = this.state.rule
        return (
            <View style={{ width: '100%', height: 62, backgroundColor: Colors.darkBackground, flexDirection: 'row', alignItems: 'center', alignSelf: 'center' }}>
                <Text style={{ fontSize: 18, color: 'black', marginLeft: 15, marginRight: 30 }}>漏水报警：</Text>
                <TouchableOpacity onPress={() => {
                    let waterAlarm = !Boolean(rule.waterAlarm) * 1
                    this.setState((prevState) => {
                        return {
                            rule: { ...prevState.rule, waterAlarm: waterAlarm }
                        };
                    })
                }} >
                    <Image source={Boolean(rule.waterAlarm) ? require('../Images/check_sel.png') : require('../Images/check_unsel.png')} />
                </TouchableOpacity>
            </View>
        )
    }



    _render_gj_agressiveAlarm = () => {
        let rule = this.state.rule
        return (
            <View style={{ width: '100%', height: 62, backgroundColor: Colors.darkBackground, flexDirection: 'row', alignItems: 'center', alignSelf: 'center' }}>
                <Text style={{ fontSize: 18, color: 'black', marginLeft: 15, marginRight: 30 }}>门磁报警：</Text>
                <TouchableOpacity onPress={() => {
                    let agressiveAlarm = !Boolean(rule.agressiveAlarm) * 1
                    this.setState((prevState) => {
                        return {
                            rule: { ...prevState.rule, agressiveAlarm: agressiveAlarm }
                        };
                    })
                }} >
                    <Image source={Boolean(rule.agressiveAlarm) ? require('../Images/check_sel.png') : require('../Images/check_unsel.png')} />
                </TouchableOpacity>
            </View>
        )
    }


    _renderHeader = () => {
        return (
            <View style={{ width: '100%' }}>
                <TouchableOpacity onPress={() => this.props.navigation.goBack()} style={{ flexDirection: "row", marginTop: 35, marginBottom:15, marginLeft: 35, alignItems: 'center' }}>
                    <Image source={require('../Images/back.png')} />
                    <Text style={{ fontSize: 40, color: 'white', marginLeft: 10 }}>设置</Text>
                </TouchableOpacity>
            </View>
        )
    }
    _renderBottom() {
        return (
            <Button
                onPress={() => this._doChange()}
                isLoading={this.state.bt_isLoading}
                style={{ width: Metrics.screenWidth - 37 * 2, height: 47, alignSelf: 'center', backgroundColor: Colors.buttonColor, marginTop: 30, marginBottom: 30, borderWidth: 0, borderRadius: 8 }}
                textStyle={{ color: '#17212D', fontSize: 18, fontWeight: 'bold' }}>
                确定
            </Button>
        )
    }

    render() {
        return (
            <View style={styles.container}>
                <Image source={require('../Images/bg.png')} style={{ width: '100%', height: '100%', position: 'absolute' }} resizeMode='stretch' />
                {this._renderHeader()}
                <KeyboardAvoidingView behavior={Metrics.isIOS ? behavior = 'padding' : null} style={{ flex: 1 }}>
                    <ScrollView style={{ flex: 1 }}>
                        {this._renderFirst()}
                        {this._renderSecond()}
                        {this._renderBottom()}
                    </ScrollView>
                </KeyboardAvoidingView>
            </View>
        )
    }
}


export default DeviceRuleScreen